// 二级导航
$(function () {
  var li = $(".head-b1-left-xia-li");
  var xian = $(".head-b1-left-xia-li-xian");

  li.mouseover(function () {
    $(this).css("background-color", "#027BD6");
    $(this).children(".head-b1-left-xia-li-xian").css("display", "block");
  });
  li.mouseleave(function () {
    $(this).css("background-color", "#2984eb");
    $(this).children(".head-b1-left-xia-li-xian").css("display", "none");
  });
});
// 轮播图

/**
 * 匀速运动
 * @param {*} ele
 * @param {*} target
 */
function moveAnimation(ele, target) {
  clearInterval(interId);
  interId = setInterval(function () {
    // x:小盒距离 大盒子的距离 和 target目标距离
    // x800|0 == target800|0 ,,清空定时器
    // x0-799 > target 0, 向左  点击向左 moveAnimation(small,0)
    // x0-799 <target 800 向右  点击向右 moveAnimation(small,800)
    var x = ele.offsetLeft; //400,800 0-500
    if (x == target) {
      clearInterval(interId);
    } else if (x > target) {
      x -= 13;
      x = x < target ? target : x;
      ele.style.left = x + "px";
    } else if (x < target) {
      x += 13;
      x = x > target ? target : x;
      ele.style.left = x + "px";
    }
  }, 6);
}
var interId;

var index = 0; //图片索引
var circleIndex = 0; //焦点索引
var interId2;
var viewpage = document.getElementsByClassName("viewpage")[0];
var item = document.getElementsByClassName("item");
var calList = document.getElementsByClassName("head-c")[0];
var circleList = document.getElementsByClassName("circle-list")[0];
var circle = document.getElementsByClassName("circle");

function autoplay() {
  interId2 = setInterval(function () {
    var w = item[0].offsetWidth;
    // console.log(w);
    index++;
    circleIndex++;
    if (index >= item.length) {
      index = 1;
      viewpage.style.left = "0px";
    }
    if (circleIndex == circle.length) {
      circleIndex = 0;
    }
    initColor(circle); //初始化颜色
    circle[circleIndex].className = "circle active"; //设置当前焦点颜色
    var target = -w * index;
    moveAnimation(viewpage, target);
  }, 1500);
}
autoplay();

//2 鼠标悬停动画暂停，鼠标离开动画继续
calList.onmouseover = function (e) {
  // prev.style.display = 'block';
  // next.style.display = 'block';
  clearInterval(interId2);
};
calList.onmouseout = function (e) {
  // prev.style.display = 'none';
  // next.style.display = 'none';
  autoplay();
};

//排他思想
function initColor(arr) {
  for (var i = 0; i < arr.length; i++) {
    arr[i].className = "circle";
  }
}

//循环焦点添加点击事件
for (var i = 0; i < circle.length; i++) {
  var w = item[0].offsetWidth;
  circle[i].ind = i; //获取
  circle[i].onclick = function (e) {
    index = this.ind;
    circleIndex = this.ind;
    initColor(circle); //初始化颜色
    circle[circleIndex].className = "circle active"; //设置当前焦点颜色
    var target = -w * index;
    moveAnimation(viewpage, target);
  };
}

// 热门推荐
$(function () {
  var li = $(".head-d1-top-li");
  li.hover(function () {
    $(this).css("color", "#006BBC").siblings().css("color", "#555");
    $($(".head-d1-bottom-ul")[$(this).index()])
      .css("display", "block")
      .siblings()
      .css("display", "none");
  });
});

// 厨房电器
$(function () {
  $(".body-a-center-top-right li").hover(function () {
    $(this).attr("class", "on").siblings().removeAttr("class", "on");

    // $($(".body-a-center-bottom-right-ul")[$(this).index()])
    //   .css("display", "block")
    //   .siblings()
    //   .css("display", "none");
    var en = $(this)
      .parents(".body-a-center-top")
      .next()
      .find(".body-a-center-bottom-right-ul");
    let index = $($(this).parent().children()).index($(this));
    // console.log(index);
    // console.log(en);
    $($(en)[index]).show().siblings().hide();
  });
});

// 渲染

// var jiadainXiaoUl = document.querySelector(".body-a-center-bottom-right-li-ul");
// var str = "";
// allObj.jiaxDian.data.forEach(function (v, i) {
//   str += `
//   <li class="body-a-center-bottom-right-li-ul-li">
//       <img src=${v.src} alt=""
//         width="143px" height="143px">
//       <a title="小米 米家IH电饭煲 小米智能家用wifi电饭锅3L手机控制 小米专卖店 正品授权">${v.name}</a>
//       <p>${v.new}</p>
//   </li>
//   `;
// });
// jiadainXiaoUl.innerHTML += str;
$(allObj.jiaxDian).each(function (i, v) {
  $($(".body-a-center-bottom-right-li-ul")[0]).append(
    $(
      '<li class="body-a-center-bottom-right-li-ul-li" data-id="' +
        v.id +
        '"><img src="' +
        v.data.src +
        '" alt=""width="143px" height="143px"><a title="' +
        v.data.name +
        '">' +
        v.data.name +
        "</a><p> ¥" +
        v.data.new +
        " </p></li>"
    )
  );
});

// 跳转详细
// var zhuan = $(".body-a-center-bottom-right-li-ul-li");
// // console.log(zhuan);
// zhuan.click(function () {
//   window.location.href = "";
// });
// 随手购轮播
var viewpageUL = document.getElementsByClassName("foot-center-bottom-ul")[0];
var itemLi = document.getElementsByClassName("foot-center-bottom-li");
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];

var index1 = 0; //图片索引
var circleIndex = 0; //焦点索引

next.onclick = function (e) {
  // console.log(index1);
  if (index1 < 2) {
    index1++;
    viewpageUL.style.left = -1200 * index1 + "px";
  }
  // viewpageUL.style.left = -1200 * index1 + "px";
};
prev.onclick = function (e) {
  if (index1 == 2 || index1 > 0) {
    index1--;
    viewpageUL.style.left = -1200 * index1 + "px";
  }
};
// 渲染
var suishouUl = document.querySelector(".foot-center-bottom-ul");
var str1 = "";
suiShou[0].suiShou.forEach(function (v, i) {
  str1 += `
  <li class="foot-center-bottom-li">
  <div class="foot-center-bottom-li-img">
    <img
      src=${v.src}
      width="158px" height="158px">
  </div>
  <div class="foot-center-bottom-li-price">
  ${v.price}
  </div>
  <div class="foot-center-bottom-li-name">
    <a href="">${v.introduce}</a>
  </div>
  <div class="foot-center-bottom-li-btn">
    <a>${v.check}</a>
  </div>
</li>
  `;
});
suishouUl.innerHTML += str1;

// 楼层导航

var daoHong = document.querySelector(".foot-left");
var cengJi = document.querySelectorAll(".foot-left-item");
var height = window.pageYOffset;
// console.log(height);
window.onscroll = function () {
  var height = window.pageYOffset;
  if (height >= 540) {
    daoHong.style.display = "block";
  } else {
    daoHong.style.display = "none";
  }
  if (height >= 540 && height <= 890) {
    cengJi[0].style.background = "#009fe9";
  } else {
    cengJi[0].style.background = "#e9e9e9";
  }
  if (height >= 890 && height <= 1240) {
    cengJi[1].style.background = "#009fe9";
  } else {
    cengJi[1].style.background = "#e9e9e9";
  }
  if (height >= 1240 && height <= 1940) {
    cengJi[2].style.background = "#009fe9";
  } else {
    cengJi[2].style.background = "#e9e9e9";
  }
  if (height >= 1940 && height <= 2640) {
    cengJi[3].style.background = "#009fe9";
  } else {
    cengJi[3].style.background = "#e9e9e9";
  }
  if (height >= 2640 && height <= 3240) {
    cengJi[4].style.background = "#009fe9";
  } else {
    cengJi[4].style.background = "#e9e9e9";
  }
  if (height >= 3240 && height <= 3940) {
    cengJi[5].style.background = "#009fe9";
  } else {
    cengJi[5].style.background = "#e9e9e9";
  }
  if (height >= 3940) {
    cengJi[6].style.background = "#009fe9";
  } else {
    cengJi[6].style.background = "#e9e9e9";
  }
};
for (let i = 0; i < cengJi.length; i++) {
  cengJi[i].ind = i;
  cengJi[i].onclick = function () {
    index2 = this.ind;
    // console.log(index2);
    window.scroll({
      top: index2 * 700,
      behavior: "smooth",
    });
  };
}
var fanHui = document.querySelector(".foot-left-item1");
fanHui.onclick = function () {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

// 侧边

// 浏览记录

$(function () {
  $(".body-a-center-bottom-right-li-ul-li").click(function () {
    var id = $(this).attr("data-id");
    var stroage = window.localStorage;
    // 浏览记录id
    stroage.setItem("id" + id + "", id);
    // 详情页面id
    stroage.setItem("id", id);
    // 购物车id
    stroage.setItem("sid", id);

    stroage.setItem("index", 5);
    // 详情页面跳转
    window.location.href = "particulars.html";
    console.log(stroage);
    console.log($(this).attr("data-id"));
  });
});
